﻿<template>
  <div class="wal-wrapper">
    <img :src="img.list1" alt srcset />
    <div class="wal-title">登录注册更精彩</div>
    <div>
      <div>*手机号</div>
      <input type="text" placeholder="请输入手机号" v-model="phone" />
    </div>
    <!-- <div>
      <div>*验证码</div>
      <input type="text" placeholder="请输入密码" />
      <div>
        <img :src="img.list2" alt srcset />
      </div>
    </div>-->
    <div>
      <div>*短信验证码</div>
      <input type="text" placeholder="请输入短信验证码" v-model="yzm" />
      <div :class="yes ? 'no' : 'yes'" @click="yes ? '' : getYZM()">
        {{ yes ? sz + 's' : '发送' }}
      </div>
    </div>
    <div>
      <div>*设置密码</div>
      <input type="password" placeholder="请输入密码" v-model="password" />
      <!-- <div> -->
      <!-- <img :src="img.list2" alt srcset /> -->
      <!-- </div> -->
    </div>
    <div>
      <div>*确认密码</div>
      <input
        type="password"
        placeholder="请输入确认密码"
        v-model="qrpassword"
      />
      <!-- <div> -->
      <!-- <img :src="img.list2" alt srcset /> -->
      <!-- </div> -->
    </div>
    <div class="btn" v-if="panduan == 0" @click="registerCli()">注册</div>
    <div class="btn" v-if="panduan == 1" @click="registerCliTwo()">
      重新注册
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  props: {},
  data() {
    return {
      img: {
        list1: require('../../../static/images/insert/logo.png'),
        list2: require('../../../static/images/insert/yzm.png')
      },
      phone: '',
      password: '',
      qrpassword: '',
      yzm: '',
      yes: false,
      sz: 60,
      panduan: 0
    }
  },
  computed: {},
  watch: {},
  methods: {
    registerCliTwo() {
      if (this.password === this.qrpassword) {
        this.$axios({
          method: 'POST',
          url: 'Flink/fpasswd',
          data: {
            phone: this.phone,
            password: this.password,
            Verification: this.yzm
          }
        })
          .then(res => {
            if (res.data.code == 200) {
              this.$jump('/')
            } else {
              alert(res.data.msg)
            }
          })
          .catch(error => {
            console.log(error)
          })
      } else {
        alert('确认密码与设置密码不相符，请重新输入！')
      }
    },
    registerCli() {
      if (this.password === this.qrpassword) {
        let _this = this
        this.$axios({
          method: 'POST',
          url: 'Flink/sign',
          data: {
            phone: _this.phone,
            password: _this.password,
            confirm_password: _this.qrpassword,
            Verification: _this.yzm
            // token: sessionStorage.token
          }
        })
          .then(res => {
            if (res.data.code == 200) {
              this.$jump('/')
            } else {
              alert(res.data.msg)
            }
          })
          .catch(error => {
            console.log(error)
          })
      } else {
        alert('确认密码与设置密码不相符，请重新输入！')
      }
    },
    isLogin() {
      this.$axios({
        method: 'POST',
        url: 'NeedLoginAction/login',
        data: {
          phone: this.phone,
          password: this.password,
          audit: 1
        }
      })
        .then(res => {
          if (res.data.code === 200) {
            sessionStorage.token = res.data.data.token
            // this.$jp('personageInfor',{audit: 1})
            this.$jump('/')
          } else {
            alert(res.data.msg)
          }
        })
        .catch(error => {
          console.log(error)
        })
    },
    // 获取验证码
    getYZM() {
      console.log(this.phone)
      if (this.phone === '') {
        alert('手机号不能为空！')
        return false
      } else if (!/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.phone)) {
        alert('手机号输入不正确！')
        return false
      } else {
        this.$axios({
          method: 'POST',
          url: 'Flink/Verification',
          data: {
            phone: this.phone,
            status: this.panduan
          }
        })
          .then(res => {
            if (res.data.code === 200) {
              this.times()

              this.yzm = res.data.data.Verification
              // sessionStorage.token = res.data.data.token
            } else {
              alert(res.data.msg)
            }
          })
          .catch(error => {
            console.log(error)
          })
      }
    },
    times() {
      this.yes = true
      let timer = setInterval(() => {
        if (this.sz == 0) {
          this.yes = false
          clearInterval(timer)
          this.sz = 61
        }
        this.sz--
      }, 1000)
    }
  },
  created() {
    this.panduan = this.$route.params.ids
  },
  mounted() {}
}
</script>

<style lang="scss" scoped>
.yes {
  color: #fff;
  background-color: #323232;
}

.no {
  color: #eee;
  background-color: #ccc !important;
}

.wal-wrapper {
  width: 100%;
  min-height: 100vh;
  background-image: url('../../../static/images/insert/bhj.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  & > img {
    margin-top: 1.786667rem;
    width: 2.48rem;
    height: 2.48rem;
  }
  & > .wal-title {
    margin: 0.813333rem 0 1.146667rem 0;
    font-size: 0.413333rem;
    font-weight: normal;
    font-stretch: normal;
    letter-spacing: 0rem;
    color: #fff;
  }
  & > div:nth-child(n + 3) {
    border-bottom: 1px solid #fff;
    width: 8.413333rem;
    height: 1.44rem;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    font-size: 0.453333rem;
    font-weight: normal;
    font-stretch: normal;
    letter-spacing: 0rem;
    color: #ffffff;
    & > input {
      width: 3.626667rem;
      margin: 0 0.3rem;
      background: transparent;
      color: #fff;
    }
    & > div:nth-child(1) {
      margin-left: 0.2rem;
      width: 2.813333rem;
    }
    & > div:nth-child(2) {
      & > img {
        width: 1.706667rem;
        height: 0.493333rem;
      }
    }
  }
  & > div:nth-child(7) {
    margin: 1.6146vw 0;
    height: 1.08rem;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    border: none;
    background-color: #323232;
    border-radius: 0.48rem;
  }
  & > div:nth-child(4) {
    & > div:nth-child(3) {
      width: 1.573333rem;
      height: 0.573333rem;
      background-color: #323232;
      border-radius: 0.066667rem;
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
    }
  }
}
</style>
